<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#search{
				width: 300px;
				text-align: center;
				border: 1px solid red;
				/*position: absolute; */
			}
			#head{
				height: 200px;
			}
			body{
				height: 10000px;
				width: 4000px;
			}
		</style>
		<script>
			function getLeft(e)
			{
				var l=e.offsetTop;
				while((e=e.offsetParent)!=null)
				{
					l+=e.offsetTop;
				}
				return l;
			}
			window.onscroll=function(){
				//var _d=document;
				var stop=document.documentElement.scrollTop||document.body.scrollTop;
				//stop超过了search元素的位置
				var search=document.getElementById("search");
				//var l=getLeft(search);
				var l=search.getBoundingClientRect().top;
				//alert(l);
				console.log("gaodu:"+l);
				if(stop>=l)
				{
					search.style.position="fixed"; 
					 search.style.top="10px";
					//search.style.top=(stop-l)+"px";
				}else{
					search.style.position="static";
				}
			}
		</script>
	</head>
	<body>
		<div id="head" >
			
		</div>
		<div id="search">
			<form>
				<input type="text" />
				<input type="submit" value="search"/>
			</form>
		</div>
	</body>
</html>
